import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
// import HomeView from "../views/HomeView.vue";
// import HomeView from "../views/HomeView.vue";
// import HomeView from "../views/HomeView.vue";
// import HomeView from "../views/HomeView.vue";
// import HomeView from "../views/HomeView.vue";
// import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "home",
        component: HomeView,
        children: [
            {
                path: "haha",
                component: () =>
                    import(/* webpackChunkName: "about" */ "../views/Haha.vue")
            },
            {
                path: "/A",
                component: () =>
                    import(
                        /* webpackChunkName: "about" */ "../views/keepalive/A.vue"
                    )
            },
            {
                path: "/B",
                component: () =>
                    import(
                        /* webpackChunkName: "B" */ "../views/keepalive/B.vue"
                    )
            },
            {
                path: "/C",
                component: () =>
                    import(
                        /* webpackChunkName: "B" */ "../views/keepalive/C.vue"
                    )
            },
            {
                path: "/D",
                component: () =>
                    import(
                        /* webpackChunkName: "about" */ "../views/keepalive/D.vue"
                    )
            }
        ]
    },
    {
        path: "/about",
        name: "about",
        component: () =>
            import(/* webpackChunkName: "about1" */ "../views/AboutView.vue")
    },
    {
        path: "/nextTick",
        name: "nextTick",
        component: () =>
            import(
                /* webpackChunkName: "about1" */ "../views/set_nextTick/nextTick.vue"
            )
    },
    {
        path: "/set",
        name: "set",
        component: () =>
            import(
                /* webpackChunkName: "about1" */ "../views/set_nextTick/set.vue"
            )
    },
    {
        path: "/parent",
        name: "parent",
        component: () =>
            import(
                /* webpackChunkName: "about1" */ "../views/componentProps/parent.vue"
            )
    },
    {
        path: "/vuex",
        name: "vuex",
        component: () =>
            import(/* webpackChunkName: "about1" */ "../views/vuex.vue")
    },
    {
        path: "/slot",
        name: "vuex",
        component: () =>
            import(/* webpackChunkName: "about1" */ "../views/slot/slot.vue")
    }
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

// 全局的导航守卫:任意路由的变换.都会走这两个钩子
router.afterEach(() => {});
router.beforeEach(() => {});

export default router;
